/* Common styles for all .html pages */

@import url("./custom_math_elements.css");

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    color-scheme: light dark;
    --bg-color: light-dark(white, hsl(0, 0%, 13%));
    --text-color: light-dark(black, hsl(240, 24%, 91%));

    --footer-color: light-dark(hsl(31, 64%, 92%), hsl(30, 2%, 19%));

    --link-color: light-dark(hsl(240, 100%, 44%), hsl(177, 100%, 91%));
    --link-visited-color: light-dark(hsl(261, 100%, 24%), hsl(62, 100%, 74%));
    --link-active-color: light-dark(hsl(0, 68%, 29%), white);

    --nav-color: light-dark(hsla(33, 100%, 88%, 0.8), hsla(34, 5%, 29%, 0.8));
    --nav-color-opaque: light-dark(hsl(32, 100%, 93%), hsl(30, 4%, 18%));
    --nav-item-color-shaded: light-dark(hsla(33, 81%, 83%, 0.8), hsla(30, 3%, 34%, 0.6));
    --nav-text-color: light-dark(black, hsl(240, 24%, 91%));
    --nav-item-color-active: light-dark(hsla(44, 100%, 53%, 0.6), hsla(0, 78%, 33%, 0.6));
    --nav-item-border-color-active: light-dark(hsl(17, 100%, 50%), hsl(0, 0%, 100%));
    --nav-dropdownBtn-icon-text-color: light-dark(black, hsl(240, 24%, 96%));
    --nav-height: 50px;

    --overlay-color: light-dark(hsla(0, 0%, 51%, 0.1), hsla(0, 0%, 0%, 0.1));

    --overlay-z-index: 9;
    --sidebar-z-index: 10;
    --skip-z-index: 9999;

    --table-border-color: light-dark(black, white);
    --table-tr-shaded: light-dark(hsl(51, 17%, 92%), hsl(240, 3%, 21%));
    --table-tr-shaded-hover: light-dark(hsl(51, 17%, 84%), hsl(240, 6%, 28%));
    font-family: "Liberation Sans", Verdana, Geneva, Tahoma, sans-serif;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

main {
    flex-grow: 1;
}

footer {
    text-align: center;
    background-color: var(--footer-color);
}

a {
    color: var(--link-color);
}

a:visited {
    color: var(--link-visited-color);
}

a:active {
    color: var(--link-active-color);
}

a[target="_blank"]::after {
    content: "";
    -webkit-mask-image: url("../img/icons8-new-tab.svg");
    -webkit-mask-position: 50%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("../img/icons8-new-tab.svg");
    mask-position: 50%;
    mask-repeat: no-repeat;
    background-color: currentColor !important;
    padding: 0 7px;
    margin: 2px;
}

.skip {
    display: inline-block;
    left: -100vw;
    position: absolute;
    font-weight: bolder;
    font-size: larger;
    padding: 10px;
    background-color: var(--bg-color);
    z-index: var(--skip-z-index);
}

.skip:focus-within,
.skip:active {
    left: 5px;
    top: 5px;
    outline: 5px solid light-dark(black, white);
}

/* Navbar styles */

.navbar {
    position: sticky;
    display: flex;
    top: 0;
    background-color: var(--nav-color);
    justify-content: space-between;
    align-items: center;
    padding-right: 50px;
    color: var(--nav-text-color);
}

.navbar * {
    margin: 0;
    padding: 0;
}

.showSidebar,
.closeSidebar {
    display: none;
    border: 0;
    background: none;
    cursor: pointer;
    width: fit-content;
}

.navbar a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: inherit;
    height: 100%;
    padding: 0 10px;
    gap: 10px;
}

.navbar-header {
    height: var(--nav-height);
    display: grid;
    place-items: center;
}

.navbar-header a {
    width: 100%;
    padding: 0 50px;
}

.navbarListContainer,
.navbarList {
    margin: 0;
    padding: 0;
    height: var(--nav-height);
    display: inline-flex;
    align-items: center;
}

.navbarList li {
    list-style-type: none;
    width: fit-content;
    height: 100%;
}

/* Change background-color of dropdownBtn's <button> only if the inside <li>'s are not hovered*/
.navbarList li:hover:not(:has(li:hover)) {
    background-color: var(--nav-item-color-shaded);
}

.navbarList li:has(> a.current) {
    background-color: var(--nav-item-color-active) !important;
    border-bottom: 2px solid var(--nav-item-border-color-active);
}

/* Place border on left inside dropdown <li> with a.current*/
.navbarList li li:has(> a.current) {
    border-bottom: none;
    border-left: 2px solid var(--nav-item-border-color-active);
}

.navbar-dropdownBtn > button {
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: inherit;
    height: 100%;
    padding: 0 10px;
    gap: 10px;
}

.navbar-dropdownBtn > button {

    &::before,
    &::after {
        color: var(--nav-dropdownBtn-icon-text-color);
    }

    &::after {
        content: "▾";
    }
}

.navbar-dropdownBtn:hover,
.navbar-dropdownBtn:focus-within {
    /* On dropdown button hover */

    .navbar-dropdown {
        display: flex;
        background-color: var(--nav-color);
        flex-direction: column;
    }

    li {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    li a {
        padding: 10px 5px;
    }
}

.navbar-dropdown {
    display: none;
    z-index: calc(var(--sidebar-z-index) + 1);
    position: absolute;
}

#overlay {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: var(--overlay-color);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: var(--overlay-z-index);
}

@media (prefers-color-scheme: dark) {

    .showSidebar,
    .closeSidebar {
        & > img {
            filter: invert(1);
        }
    }
}

@media screen and (width < 920px) {
    #showSidebarIcon {
        height: calc(var(--nav-height) - 20px);
        aspect-ratio: 1 / 1;
    }

    .showSidebar {
        display: inline-block;
        height: var(--nav-height);
        padding: 10px;
    }


    .closeSidebar {
        display: inline-block;
        align-self: flex-start;
        margin: 5px 0 0 5px;
        padding: 10px;
    }

    .navbar {
        z-index: var(--sidebar-z-index);
    }

    .navbarListContainer {
        position: fixed;
        top: 0;
        right: 0;
        transform: translateX(100%);
        padding: 0;
        flex-direction: column;
        justify-content: flex-start;
        min-width: 200px;
        max-width: 300px;
        height: 100%;
        background-color: var(--nav-color-opaque);
    }

    .navbarList li:has(> a.current) {
        border-bottom: none;
        border-left: 2px solid var(--nav-item-border-color-active);
    }

    .navbarListContainer.sidebarShown {
        transform: translateX(0%);
        transition: transform 0.2s ease-out;
    }

    #overlay.visible {
        display: block;
    }

    .navbar-dropdownBtn {
        position: relative;
    }

    .navbar-dropdownBtn > button {
        width: 100%;
        padding: 10px 0;
    }

    .navbar-dropdownBtn {

        &:hover,
        &:focus-within {
            li a {
                padding: 10px 0;
            }

            .navbar-dropdown {
                background-color: var(--nav-color-opaque);
            }
        }

        & > button {

            &::before,
            &::after {
                display: inline-block;
                height: 100%;
                line-height: 1;
                /* Vertically center icon with text */
            }

            &::before {
                content: "◂";
            }

            &::after {
                content: "";
            }
        }
    }

    .navbarList li {
        width: 100%;
    }

    .navbarList {
        flex-direction: column;
        height: unset;
        width: 100%;
    }

    .navbarList a {
        padding: 10px 0;
    }

    .navbar-dropdown {
        width: 100%;
        position: absolute;
        top: 0;
        right: 100%;
    }
}

/* Magical <h1> */

.headerMagical {
    text-align: center;

    & > button {
        font-size: 5rem;
        cursor: text;
        border: 0;
        background: none;
        -webkit-user-select: auto;
        -moz-user-select: auto;
        user-select: auto;
    }
}

/* Table */

.table {
    margin: 10px;
    border-collapse: collapse;
    caption-side: bottom;

    td,
    tr,
    th {
        border: 1px solid var(--table-border-color);
    }

    th,
    td {
        padding: 5px;
    }

    input {
        width: 3ch;
    }

    tr:nth-of-type(even) {
        background-color: var(--table-tr-shaded);
    }

    tr:hover {
        background-color: var(--table-tr-shaded-hover);
    }
}